<style>
  .ivu-tabs-bar{
    margin-bottom:-1px;
  }
</style>
<template>
  <div class="flow-node"
    :draggable="nodeInfo.draggable"
    :style="nodePosition"
    @dragstart="nodeDragStart(option.id)"
    @drag="nodeDragging(option.id)"
    @dragend="nodeDragEnd(option.id)"
    @mouseenter="mouseEnterNode(option.id)"
       v-on:click="click(option.id)"
       v-on:dblclick="doubleClick(option.type)">

    <Modal v-model="showSet" title="控件配置" width="600px" height="280px">
      <Form :label-width="40">
        <FormItem label="Name">
          <Input v-model="nodeName"  placeholder="请输入控件名称"></Input>
        </FormItem>
        <Tabs name="inputTab" type="card" size="small" :value="tabsDef">
          <TabPane name="inputTab" label="Input">
            <Table size="small" :columns="cols" :data="inputData" height="180" no-data-text="无配置项" border ></Table>
          </TabPane>
          <TabPane name="outputTab" label="Output">
            <Table size="small" :columns="cols" :data="outputData" height="180" no-data-text="无配置项" border></Table>
          </TabPane>
          <TabPane name="valueTab" label="Value">
            <Table size="small" :columns="cols" :data="valueData" height="180" no-data-text="无配置项" border></Table>
          </TabPane>
        </Tabs>
      </Form>
      <div slot="footer">
        <Button type="ghost"  @click="doCancel()">取消</Button>
        <Button type="primary"  @click="doOK()">确定</Button>
      </div>
    </Modal>

    <icon :name="option.type"
          :inText="option.text"
      :size="80"
      :ref="option.id"
      style="cursor:move" />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'node',
  data() {
    return {
      showSet:false,
      nodeName:'',
      tabsDef:'',
      cols:[{
          title: 'Name',
          key: 'name',
          width:180
      },{
          title: 'Type',
          key: 'type',
          width:120,
          render: (h, params) => {
            let self=this;
            if(this.option.type=='data'&&params.row.name=='Input'){
              let selectValue;
              if(self.tabs.tabTempValue['input'+params.index]==undefined){
                selectValue='Text'
              }else{
                selectValue=self.tabs.tabTempValue['input'+params.index]
              }
              return h('Select',{
                  props:{
                    value:selectValue
                  },
                  on: {
                    'on-change':(v) => {
                      self.tabs.tabTempValue['input'+params.index] = v;
                      console.log('iii',self.tabs.tabTempValue['input'+params.index])
                    }
                  },
                },[
                h('Option', {
                  props: {
                    value: 'Text',
                  }
                }, 'Text'),
                h('Option', {
                  props: {
                    value: 'Number',
                  }
                }, 'Number')
              ]);
            }else{
              return h('div',params.row.type)
            }
          }
      },{
          title: 'Value',
          key: 'value',
          render: (h, params) => {
            let self=this;
            if(params.row.type=='Text'||self.tabs.tabTempValue['input'+params.index]=='Text'){
              return h('Input', {
                props:{
                  name:'input'+params.index,
                  placeholder:'Enter Value',
                  value:self.tabs.tabInValue['input'+params.index]
                },
                on:{
                  'on-change':(v)=>{
                    self.tabs.tabInTempValue['input'+params.index]=v.target.value
                  }
                }
              });
            }else if(params.row.type=='Element'){
              return h('div', [
                h('Button', {
                  props: {
                    type: 'ghost',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      self.xpathIndex=params.index;
                      self.disabledInput=false;
                    }
                  }
                }, 'Pick Element'),
                h('Input', {
                  props:{
                    name:'input'+params.index,
                    placeholder:'Enter Xpath',
                    value:self.tabs.tabInValue['input'+params.index],
                    disabled:self.disabledInput,
                  },
                  on:{
                    'on-change':(v)=>{
                      self.tabs.tabInTempValue['input'+params.index]=v.target.value
                    },
                    'on-blur':()=>{
                      self.disabledInput=true;
                    }
                  },
                  style:{
                    width:'122px',
                  }
                })
              ]);
              ;
            }

        }
      },],
      disabledInput:true,
      //表格Value列放入控件
      inputData:[],
      outputData:[],
      valueData:[],
      tabs:{ //表格Value列中缓存值
        tabInTempValue:[],
        tabInValue:[],
        tabTempValue:[],
        tabValue:[],
      },
      xpathValue:'',
      xpathIndex:'',

      arrowVisible: false,
      nodeInfo: {
        draggable: true
      }
    };
  },
  props: {
    option: {
      type: Object,
    }
  },
  computed: {
    ...mapState('flow', ['nodeData']),
    nodePosition() {
      return {
        left: `${this.option.left}px`,
        top: `${this.option.top}px`
      };
    }
  },
  methods: {
    ...mapMutations('flow', ['UPDATE_NODE', 'UPDATE_HOVER_NODE','DELETE_NODE']),
    nodeDragStart(id) {
      let img = this.$el;
      let dataTransfer = event.dataTransfer;
      dataTransfer.dropEffect = 'move';
      dataTransfer.setData('Text', `update:${this.option.id}`);
      dataTransfer.setDragImage(img, 40, 40);
      this.$emit('nodeDragStart', id);
    },
    nodeDragging(id) {
      this.$emit('nodeDragging', { id, event });
    },
    nodeDragEnd(id) {
      this.$emit('nodeDragEnd', { id, event });
    },
    mouseEnterNode(id) {
      this.UPDATE_HOVER_NODE({
        id
      });
    },
    getNodeSize() {
      let id = this.option.id;
      let { width, height, x, y } = this.$refs[id].$el.childNodes[0].getBBox();
      width = +width.toFixed(0);
      height = +(height - 3).toFixed(0);
      x = +x.toFixed(0);
      y = +y.toFixed(0);

      this.UPDATE_NODE({
        [id]: {
          ...this.nodeData[id],
          width,
          height,
          x,
          y
        }
      });
    },
    init() {
      let id = this.option.id;
      if (typeof this.nodeData[id].width === 'undefined') {
        this.getNodeSize();
      }
    },
    click(id){
      console.log('a click id'+id);
//      this.DELETE_NODE(id);
    },
    doubleClick(type){
      console.log('doubleClick');
      let row1,row2,row3,row4,row5;
      this.inputData=[];
      this.outputData=[];
      this.valueData=[];
      switch (type) {
        case 'start':
          row1={
            name:'Description',
            type:'Text',
          }
          this.inputData.push(row1);
          this.tabsDef='inputTab';
          break;
        case 'process':
          row1={
            name:'App Start',
            type:'Text',
          }
          row2={
            name:'Arguments',
            type:'Text',
          }
          this.inputData.push(row1);
          this.inputData.push(row2);
          this.tabsDef='inputTab';
          break;
        case 'write':
          row1={
            name:'Element',
            type:'Element',
          }
          row2={
            name:'Arguments',
            type:'Text',
          }
          this.inputData.push(row1);
          this.inputData.push(row2);
          this.tabsDef='inputTab';
          break;
        case 'action':
          row1={
            name:'Element',
            type:'Element',
          }
          this.inputData.push(row1);
          this.tabsDef='inputTab';
          break;
        case 'input':
          row1={
            name:'Input',
            type:'Text',
          }
          this.valueData.push(row1);
          this.tabsDef='valueTab';
          break;
        case 'decision':
          break;
        case 'document':
          break;
        default: //loop
          break;
      }
      this.showSet=true;
    },
    doOK(){
      this.tabs.tabInValue=this.tabs.tabInTempValue;
      this.showSet=false;
      let type;
      (this.inputData.length>0)? type='inputData':(this.outputData.length>0)? type='outputData': type='valueData'

      let activities=[];
      for(let i=0;i<this[type].length;i++){
        let a={};
        a['workName']=this[type][i].name;
        a['workType']=this[type][i].type;
        a['workValue']=this.tabs.tabInValue['input'+i];
        activities.push(a);
      }
      let id=this.option.id;

      this.UPDATE_NODE({
        [id]: {
          ...this.nodeData[id],
          text: this.nodeName,
          activities:activities
        }
      });

    },
    doCancel(){
      this.showSet=false;
    },
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="scss">
.flow-node {
  position: absolute;
  z-index: 9999;
  &.flow-node:hover a {
    border-right: 1px solid #000;
  }
}
</style>